<template>
  <div class="main">
    <Teamwork>
      <!-- 按钮组 -->
      <template #button-group>
        <div class="button-container">
          <div class="tech-button" @click="showDialog('group')">
            <i class="el-icon-s-cooperation"></i>
            小组表现
          </div>
          <div class="tech-button" @click="showDialog('activity')">
            <i class="el-icon-s-management"></i>
            课程活动
          </div>
          <div class="tech-button" @click="showDialog('error')">
            <i class="el-icon-s-data"></i>
            错误类型统计
          </div>
          <div class="tech-button" @click="showDialog('warning')">
            <i class="el-icon-s-custom"></i>
            人员预警
          </div>
        </div>
      </template>
      <!-- 小组名单 -->
      <template #register-target>
        <Roll></Roll>
      </template>
      <!-- 小组排名 -->
      <template #ability-target>
        <Rank></Rank>
      </template>
      <!-- 学生优秀榜( top 10) -->
      <template #quality-target>
        <Excellent></Excellent>
      </template>
      <!-- 任务导向 -->
      <template #tree-chart>
        <Mission></Mission>
      </template>
      <!-- 学习监控 -->
      <template #performance>
        <Lean></Lean>
      </template>
      <!-- 知识目标达成度 -->
      <template #knowledge>
        <Knowledge></Knowledge>
      </template>
      <!-- 能力目标达成度 -->
      <template #aptitude>
        <Capacity></Capacity>
      </template>
      <!-- 素养目标达成度 -->
      <template #literacy>
        <Literacy></Literacy>
      </template>
    </Teamwork>

    <!-- 科技感对话框 -->
    <transition name="tech-fade">
      <div v-if="dialogVisible" class="tech-dialog-overlay" @click.self="handleClose">
        <div class="tech-dialog-container">
          <div class="tech-dialog-header">
            <i :class="dialogIcon"></i>
            <span>{{ dialogTitle }}</span>
            <div class="tech-dialog-close" @click="handleClose">
              <i class="el-icon-close"></i>
            </div>
          </div>
          <div class="tech-dialog-content">
            <component :is="currentComponent" v-if="currentComponent" />
            <div v-else class="tech-loading">
              <i class="el-icon-loading"></i>
              加载中...
            </div>
          </div>
          <div class="tech-dialog-footer">
            <div class="tech-dialog-corner tl"></div>
            <div class="tech-dialog-corner tr"></div>
            <div class="tech-dialog-corner bl"></div>
            <div class="tech-dialog-corner br"></div>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
// 导入组件
import Performance from '@/components/student_team/button/Performance.vue'
import Activity from '@/components/student_team/button/Activity.vue'
import Fault from '@/components/student_team/button/Fault.vue'
import Warning from '@/components/student_team/button/Warning.vue'

export default {
  name: 'HomeView',
  components: {
    Performance,
    Activity,
    Fault,
    Warning
  },
  data() {
    return {
      dialogVisible: false,
      dialogTitle: '',
      currentComponent: null,
      dialogIcon: '',
      closing: false,
      dialogConfig: {
        group: {
          title: '小组表现详情',
          component: Performance,
          icon: 'el-icon-s-cooperation'
        },
        activity: {
          title: '课程活动详情',
          component: Activity,
          icon: 'el-icon-s-management'
        },
        error: {
          title: '错误类型统计',
          component: Fault,
          icon: 'el-icon-s-data'
        },
        warning: {
          title: '人员预警信息',
          component: Warning,
          icon: 'el-icon-s-custom'
        }
      }
    }
  },
  methods: {
    showDialog(type) {
      try {
        const config = this.dialogConfig[type]
        if (!config) {
          throw new Error(`未知的对话框类型: ${type}`)
        }

        // 重置状态
        this.closing = false
        this.currentComponent = null

        // 设置对话框内容
        this.dialogTitle = config.title
        this.dialogIcon = config.icon

        // 显示对话框
        this.dialogVisible = true

        // 延迟加载组件，优化性能
        setTimeout(() => {
          this.currentComponent = config.component
        }, 100)
      } catch (error) {
        console.error('显示对话框时出错:', error)
        this.$message.error('打开对话框失败')
        this.dialogVisible = false
      }
    },
    handleClose() {
      if (this.closing) return

      this.closing = true
      this.dialogVisible = false

      // 延迟清理组件
      setTimeout(() => {
        this.currentComponent = null
        this.dialogTitle = ''
        this.dialogIcon = ''
        this.closing = false
      }, 300)
    }
  }
}
</script>

<style scoped>
.main {
  width: 100%;
  height: 100%;
}

.button-container {
  display: flex;
  gap: 20px;
  line-height: 100%;
}

.tech-button {
  width: 160px;
  height: 40px;
  background: rgba(0, 20, 40, 0.6);
  border: 1px solid #00ffff;
  border-radius: 4px;
  color: #00ffff;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  text-shadow: 0 0 5px rgba(0, 255, 255, 0.5);
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(3px);
}

.tech-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg,
      rgba(0, 255, 255, 0),
      rgba(0, 255, 255, 0.2),
      rgba(0, 255, 255, 0));
  transition: left 0.5s ease;
}

.tech-button:hover::before {
  left: 100%;
}

.tech-button:hover {
  background: rgba(0, 255, 255, 0.1);
  box-shadow: 0 0 8px rgba(0, 255, 255, 0.3);
  transform: translateY(-2px);
}

.tech-button:active {
  transform: translateY(1px);
  box-shadow: 0 0 4px rgba(0, 255, 255, 0.2);
}

.tech-button i {
  margin-right: 8px;
  font-size: 16px;
}

/* 科技感对话框样式 */
.tech-dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 10, 20, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2000;
  backdrop-filter: blur(5px);
}

.tech-dialog-container {
  width: 80%;
  max-width: 900px;
  min-height: 500px;
  background: rgba(0, 30, 60, 0.9);
  border: 1px solid rgba(0, 255, 255, 0.4);
  border-radius: 4px;
  box-shadow: 0 0 30px rgba(0, 200, 255, 0.5);
  position: relative;
  overflow: hidden;
}

.tech-dialog-header {
  padding: 15px 20px;
  color: #00ffff;
  font-size: 18px;
  font-weight: bold;
  border-bottom: 1px solid rgba(0, 255, 255, 0.2);
  display: flex;
  align-items: center;
  text-shadow: 0 0 10px rgba(0, 200, 255, 0.7);
  background: linear-gradient(90deg, rgba(0, 40, 80, 0.5), transparent);
}

.tech-dialog-header i {
  margin-right: 10px;
  font-size: 20px;
}

.tech-dialog-close {
  margin-left: auto;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 50%;
}

.tech-dialog-close:hover {
  background: rgba(255, 0, 0, 0.3);
  transform: rotate(90deg);
}

.tech-dialog-content {
  padding: 20px;
  height: calc(100% - 100px);
  position: relative;
}

.tech-dialog-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 10px;
}

.tech-dialog-corner {
  position: absolute;
  width: 15px;
  height: 15px;
  border-color: #00ffff;
  border-style: solid;
  border-width: 0;
}

.tech-dialog-corner.tl {
  top: 0;
  left: 0;
  border-top-width: 2px;
  border-left-width: 2px;
}

.tech-dialog-corner.tr {
  top: 0;
  right: 0;
  border-top-width: 2px;
  border-right-width: 2px;
}

.tech-dialog-corner.bl {
  bottom: 0;
  left: 0;
  border-bottom-width: 2px;
  border-left-width: 2px;
}

.tech-dialog-corner.br {
  bottom: 0;
  right: 0;
  border-bottom-width: 2px;
  border-right-width: 2px;
}

.tech-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #00ffff;
  font-size: 16px;
}

.tech-loading i {
  font-size: 30px;
  margin-bottom: 10px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* 对话框动画 */
.tech-fade-enter-active,
.tech-fade-leave-active {
  transition: opacity 0.3s ease;
}

.tech-fade-enter,
.tech-fade-leave-to {
  opacity: 0;
}

/* 响应式样式 */
@media screen and (max-width: 768px) {
  .button-container {
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px;
  }

  .tech-button {
    width: calc(50% - 10px);
    height: 36px;
    font-size: 13px;
  }

  .tech-dialog-container {
    width: 95%;
    min-height: 400px;
  }
}
</style>